<!DOCTYPE html>
<html>
<head>
    <title>域名类型配置</title>
    <#include "/header.html">
    <link href="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.css"
          rel="stylesheet" />
</head>
<body>
<div id="rrapp" v-cloak class="container-div ui-layout-center">
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.domainCateKey "
                       placeholder="请输入域名key">
            </div>
            <div class="form-group col-sm-2">
                <input type="text" class="form-control" v-model="q.domainCateName"
                       placeholder="请输入域名名称">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-info" @click="update"><i class="fa fa-edit"></i>&nbsp;修改</a>
            <a class="btn btn-danger" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
        </div>
       <div class="col-sm-12 select-info table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
       </div>
   </div>

<div v-show="!showList" class="panel panel-default">
    <div class="panel-heading">{{title}}</div>
    <form class="form-horizontal" id="form">

        <div class="form-group">
            <div class="col-sm-2 control-label">选择数据源</div>
            <div class="col-sm-10">
                <select class="selectpicker" multiple id="dataSource" data-live-search="true"></select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">解析状态</div>
            <div class="col-sm-10">
                <input type="checkbox" class="checke" id="isAnalysis">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" ref="submitBtn" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
            &nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
        </div>
    </form>
</div>
</div>
<script src="${request.contextPath}/statics/plugins/jquery-layout/jquery.layout-latest.js"></script>
<script>
$(document)
        .ready(
            function() {
                $('body').layout({
                    west__size : 185
                });
                /* queryUserList();*/
                $("#dataSource").selectpicker({
                    noneSelectedText: '请选择',
                    countSelectedText: function(){}
                });
               $('#bootstrap-table')
                    .bootstrapTable(
                        {
                            method : 'post', // 服务器数据的请求方式 get or post
                            url : baseURL + 'aliyunDomainSetting/findAliyunDomainSettingPage', // 服务器数据的加载地址
                            showRefresh : true,
                            showToggle : true,
                            showColumns : true,
                            //showExport :true,
                            sortable: true,
                            sortName:"userId",// 排序列名称
                            sortOrder: "desc",
                            iconSize : 'outline',
                            toolbar : '#exampleToolbar',
                            striped : true, // 设置为true会有隔行变色效果
                            dataType : "json", // 服务器返回的数据类型
                            pagination : true, // 设置为true会在底部显示分页条
                            // queryParamsType : "limit",
                            // //设置为limit则会发送符合RESTFull格式的参数
                            singleSelect : false, // 设置为true将禁止多选
                            // contentType : "application/x-www-form-urlencoded",
                            // //发送到服务器的数据编码类型
                            pageSize : 10, // 如果设置了分页，每页数据条数
                            pageNumber : 1, // 如果设置了分布，首页页码
                            // search : true, // 是否显示搜索框
                            //showColumns : false, // 是否显示内容下拉框（选择显示的列）
                            sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                            // "server"
                            queryParams : function(params) {
                                //console.log(params)
                                return {
                                    // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                                    limit : params.limit + '',
                                    page : (params.offset/params.limit) + 1 + '',
                                    domainCateKey  : vm.q.domainCateKey,
                                    domainCateName: vm.q.domainCateName
                                };
                            },
                            columns : [
                                {
                                    checkbox : true
                                },
                                {
                                    field : 'domainCateName',
                                    align:'center',
                                    title : '域名名称'
                                },
                                {
                                    field : 'domainCateKey',
                                    align:'center',
                                    title : '域名key'
                                },
                                {
                                    field : 'isAnalysis',
                                    align:'center',
                                    title : '是否解析',
                                    formatter : function(
                                        value, row,
                                        index) {
                                        //console.log(row)
                                        var e = row.isAnalysis?'<input domainCateId="'+row.domainCateId+'" sid="'+ row.id +'" type="checkbox" class="checke" checked="checked">':'<input domainCateId="'+row.domainCateId+'" sid="'+ row.id +'" type="checkbox" class="checke">';
                                        return e;
                                    }
                                },
                                {
                                    field : 'createTime',
                                    align:'center',
                                    title : '创建时间'
                                },
                                {
                                    title : '操作',
                                    field : 'id',
                                    width:330,
                                    align : 'center',
                                    formatter : function(
                                        value, row,
                                        index) {
                                        var e = '<a  class="btn btn-primary btn-sm '
                                            + ''
                                            + '" href="#" mce_href="#" title="修改" onclick="edit(\''
                                            + row.id
                                            + '\')"><i class="fa fa-edit " style="margin-right: 5px"></i>修改</a> ';
                                        var d = '<a class="btn btn-danger btn-sm '
                                            + ''
                                            + '" href="#" title="删除"  mce_href="#" onclick="remove(\''
                                            + row.id
                                            + '\')"><i class="fa fa-remove" style="margin-right: 5px"></i>删除</a> ';
                                        return e + d;
                                    }
                                }]
                        });
            });
    var vm = new Vue({
        el : '#rrapp',
        data : {
            q : {
                domainCateKey:null,
                domainCateName:null
            },
            showList : true,
            title : null,
            allSite:[],
            user : {
                domainCateId:'',
                isAnalysis:''
            }
        },
        methods : {
            query : function() {
                vm.reload();
            },
            add : function() {
                vm.showList = false;
                vm.title = "新增";
                vm.user = {
                    domainCateId:'',
                    isAnalysis:''
                };
                vm.getDataSource();
                $("#dataSource").prop("disabled",false);
                $('#dataSource').selectpicker('refresh');
                $("#isAnalysis").prop("checked",true);
            },
            update:function () {
                vm.user = {
                    domainCateId:'',
                    isAnalysis:''
                };
                vm.getDataSource();
                $("#isAnalysis").prop("checked",true);
                var userId = getSelectedRow();
                if (userId == null) {
                    return;
                }
                $("#dataSource").prop("disabled",true);
                vm.showList = false;
                vm.title = "修改";
                vm.getUser(userId.id);
            },
            getUser : function(id) {
                $.ajax({
                    type : "POST",
                    url : baseURL + "aliyunDomainSetting/getAliyunDomainSetting",
                    contentType : "application/json",
                    data : JSON.stringify({id:id}),
                    success : function(r) {
                        if (r.code === 0) {
                            var data = r.result;
                            vm.user.id = data.id;
                            vm.user.isAnalysis = data.isAnalysis;
                            //根据返回的是否解析布尔值来设置是否解析按钮是否为开启状态
                            !data.isAnalysis?$("#isAnalysis").prop("checked",false):$("#isAnalysis").prop("checked",true);
                            vm.user.domainCateId = data.domainCateId;
                            //设置域名类型选择框起始值
                            $('#dataSource').selectpicker('val',data.domainCateId);
                            //设置完成后必须刷新当前下拉框
                            $('#dataSource').selectpicker('refresh');
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
           getDataSource:function () {
                //动态设置下拉菜单的时候必须先清空下面的子节点来保证数据的准备性
               $("#dataSource").find(".addOption").remove();
               $.ajax({
                   type : "POST",
                   url : baseURL + "domaincate/findDomainCateList",
                   async: false,
                   data:{},
                   contentType : "application/json",
                   success : function(r) {
                       if (r.code === 0) {
                           var str = '';
                           r.result.map(function (item) {
                               str = str + '<option class="addOption" value="'+ item.id +'">' + item.domainCateName + '</option>';
                           });
                           $("#dataSource").append(str);
                           $('#dataSource').selectpicker('refresh');
                           vm.displaySelect();
                       } else {
                           alert(r.msg);
                       }
                   }
               });
            },
           displaySelect:function () {
               $.ajax({
                   type : "POST",
                   url : baseURL + "aliyunDomainSetting/findDomainCateIdList",
                   contentType : "application/json",
                   data : {},
                   success : function(r) {
                       if (r.code == 0) {
                           var disabledId = r.result;
                           var options = $("#dataSource").find("option");
                           options.map(function (item) {
                              // console.log($(this).val());
                               if(disabledId.indexOf($(this).val()) > -1){
                                   $(this).attr("disabled",true);
                                   $('#dataSource').selectpicker('refresh');
                               }
                           });
                       } else {
                           alert(r.msg);
                       }
                   }
               });
           },
           del : function() {
                //获取当前行的row，所有返回参数
                var userIds = getSelectedRow();
                if (userIds == null) {
                    return;
                }
                confirm('确定要删除选中的记录？', function() {
                    $.ajax({
                        type : "POST",
                        url : baseURL + "aliyunDomainSetting/delAliyunDomainSetting",
                        contentType : "application/json",
                        data : JSON.stringify({id:userIds.id}),
                        success : function(r) {
                            if (r.code == 0) {
                                alert('操作成功', function() {
                                    vm.reload();
                                });
                            } else {
                                alert(r.msg);
                            }
                        }
                    });
                });
            },
            saveOrUpdate : function() {
                var url = vm.user.id == null ? "aliyunDomainSetting/saveAliyunDomainSetting"
                    : "aliyunDomainSetting/updateAliyunDomainSetting";
                //console.log(vm.user.platformId);
                //vue获取相关按钮元素的方法
                var btn = vm.$refs.submitBtn;
                vm.user.id == null ? vm.user.domainCateIdArr = $('#dataSource').val() : vm.user.domainCateId = $('#dataSource').val()[0];
                vm.user.isAnalysis = $("#isAnalysis").is(":checked")?1:0;
                btn.disabled = true;
                $.ajax({
                    type : "POST",
                    url : baseURL + url,
                    contentType : "application/json",
                    data : JSON.stringify(vm.user),
                    success : function(r) {
                        btn.disabled = false;
                        if (r.code === 0) {
                            alert('操作成功', function() {
                                vm.reload();
                            });
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            },
           reload : function() {
                vm.showList = true;
                var opt = {
                    url: baseURL + 'aliyunDomainSetting/findAliyunDomainSettingPage',
                    silent: true,
                    query:{
                        limit : '10',
                        page : '0',
                        domainCateKey  : vm.q.domainCateKey,
                        domainCateName: vm.q.domainCateName
                    }
                };
               $('#bootstrap-table').bootstrapTable('refresh',
                    opt);
              }
        }
    });
    //监测开关状态是否改变，即页面上的表格里面开启关闭是否解析功能
$(document).on("click",".checke",function () {
    //console.log( $(this).is(":checked"))
    //console.log($(this).attr("sid"));
    //$(this).is(":checked")?0:1
    var sid = $(this).attr("sid");
    var domainCateId = $(this).attr("domainCateId");
    if(sid != undefined){
        var params = {
            id:sid,
            isAnalysis:!$(this).is(":checked")?0:1,
            domainCateId:domainCateId
        };
        $(this).attr("disabled",true);
        //设置开关按钮的是否可点击状态
        $.ajax({
            type : "POST",
            url : baseURL + "aliyunDomainSetting/updateAliyunDomainSetting",
            contentType : "application/json",
            data : JSON.stringify(params),
            success : function(r) {
                if (r.code === 0) {
                    //回调成功后取消按钮禁用状态，可以此来防止用户得利
                    $(this).attr("disabled",false);
                    alert('操作成功', function() {
                        vm.reload();
                    });
                } else {
                    alert(r.msg);
                }
            }
        });
    }
});
function edit(id) {
    if (id == null) {
        return;
    }
    //console.log(2222)
    vm.user = {
        domainCateId:'',
        isAnalysis:''
    };
    $("#dataSource").prop("disabled",true);
    vm.showList = false;
    vm.title = "修改";
    vm.getDataSource();
    vm.getUser(id);
}
function remove(id) {
        confirm('确定要删除选中的记录？', function() {
            $.ajax({
                type : "POST",
                url : baseURL + "aliyunDomainSetting/delAliyunDomainSetting",
                contentType : "application/json",
                data : JSON.stringify({id:id}),
                success : function(r) {
                    if (r.code == 0) {
                        alert('操作成功', function() {
                            vm.reload();
                        });
                    } else {
                        alert(r.msg);
                    }
                }
            });
        });
    }
</script>
</body>
</html>